<template>
    <div class="win-op no-drag" >
        <div v-if="showSetTop"
            :class="['iconfont icon-top', isTop? 'win-top':'']"
            @click="top"
            :title="isTop?'取消置顶':'置顶'"
        >
        </div>
        <div v-if="showMin"
            class="iconfont icon-min"
            @click="minimize"
            title="最小化"
        >
        </div>
        <div v-if="showMax"
            :class="['iconfont', isMax? 'icon-maximize':'icon-max']"
            @click="maximize"
            :title="isMax? '向下还原':'最大化'"
        >
        </div>
        <div v-if="showClose"
            class="iconfont icon-close"
            @click="close"
            title="关闭"
        >
        </div>
    </div>
</template>
<script setup>
import {ref,getCurrentInstance, onMounted, provide} from "vue"

const {proxy}  = getCurrentInstance()

const props = defineProps({
    showSetTop: {
        type: Boolean,
        default: true
    },
    showMin: {
        type: Boolean,
        default: true
    },
    showMax: {
        type: Boolean,
        default: true
    },
    showClose: {
        type: Boolean,
        default: true
    },
    closeType: {
        type: Number,
        default: 1
    }
})


const count = ref(0)
provide('count',count)


const isTop = ref(false)
const isMax = ref(false)

onMounted(()=>{
    isTop.value = false
    isMax.value = false
})

const winOperater=(action,data)=>{
    window.ipcRenderer.send('winOperater',{action,data})
}

const emit = defineEmits(['closeCallback'])
const close = ()=>{
    winOperater("close",{closeType: props.closeType})
    emit('closeCallback')
}

const minimize=()=>{
    winOperater('minimize')
}

const maximize=()=>{
    if(isMax.value){ //全屏
        winOperater('unmaximize')
        isMax.value = false
    } else { //缩小
        winOperater('maximize')
        isMax.value = true
    }
}

const top = ()=>{
    isTop.value = !isTop.value
    winOperater('top',{top: isTop.value})
}





</script>
<style lang="scss" scoped>
.win-op {
    top: 0px;
    right: 0px;
    position: fixed;
    z-index: 1;
    overflow: hidden;
    height: 25px;
    border-radius: 0px 3px 0px 0px;
    .iconfont {
        float: left;
        font-size: 12px;
        color: #101010;
        text-align: center;
        display: flex;
        justify-content: center;
        cursor: pointer;
        height: 25px;
        align-items: center;
        padding: 0px 10px;
        &:hover {
            background: #ddd;
        }

    }
    .icon-close{
        &:hover {
            background: #fb7373;
            color: #fff;
        }

    }
    .win-top {
        background: #fff;
    }
    .icon-top {
        &:hover {
            background: #67e271;
            color: #fff;
        }
    }
    .icon-min {
        &:hover {
            background: #67e271;
            color: #fff;
        }
    }
    .icon-max {
        &:hover {
            background: #67e271;
            color: #fff;
        }
    }
}
</style>
